<template>
    <div v-if="!loading" class="exam-page">
        <!-- 页面内容 -->

        <div class="exam-page">
            <header class="header">
                <div class="header-left">
                    <span>{{ examination.examination_name }}</span>
                </div>
                <div class="header-middle">
                    <div class="timer">
                        <span class="timer-title">剩余时间</span>
                        <div class="timer-display">
                            <span>{{ hours }} 小时 {{ minutes }} 分钟 {{ seconds }} 秒</span>
                        </div>
                    </div>
                </div>
                <div class="header-right">
                    <button class="submit-btn" @click="confirmSubmit">提交试卷</button>
                </div>
            </header>

            <div class="content">
                <aside class="sidebar">
                    <div class="sidebar-info card">
                        <div class="exam-info">
                            <p>
                                考生姓名: <span>{{ studentInfo.nick_name }}</span>
                            </p>
                            <p>
                                身份证: <span>{{ studentInfo.user_card }}</span>
                            </p>
                            <p>
                                班级: <span>{{ studentInfo.class_id }}</span>
                            </p>
                        </div>
                        <hr />
                        <div class="progress">
                            <el-progress :percentage="progressPercentage" color="#ff4040" />
                            <p>做题进度：{{ answeredQuestions }}/{{ totalQuestions }}</p>
                        </div>
                        <hr />
                        <div class="question-types-container">
                            <h3 class="section-title">题型导航</h3>
                            <div class="question-types">
                                <div v-for="(type, typeIndex) in examData.questionTypes" :key="typeIndex"
                                    class="question-type">
                                    <p class="type-title">
                                        {{ type.name }}（{{ type.questions.length }} 题，{{
                                            type.totalScore
                                        }}
                                        分）
                                    </p>
                                    <div class="question-navigation">
                                        <button v-for="(question, qIndex) in type.questions" :key="question.subject_id"
                                            @click="
                                                goToQuestion(getGlobalQuestionIndex(typeIndex, qIndex))
                                                " :class="[
                        'question-btn',
                        {
                            active: currentQuestionId === question.subject_id,
                            answered: isAnswered(question),
                        },
                    ]">
                                            {{ getGlobalQuestionIndex(typeIndex, qIndex) }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <main class="question-area card">
                    <div v-for="(type, tIndex) in examData.questionTypes" :key="tIndex">
                        <h2 class="h1">
                            {{ type.name }}（共 {{ type.questions.length }} 题，合计
                            {{ type.totalScore }} 分）
                        </h2>
                        <div v-for="question in type.questions" :key="question.subject_id"
                            :data-question-id="question.subject_id" class="question">
                            <p class="question-title">{{ question.subject_name }}</p>
                            <div v-if="question.subject_type === 2" class="question-options">
                                <el-radio-group v-model="question.answer" @change="handleAnswerChange(question)">
                                    <el-radio v-for="(option, index) in question.options" :key="option.id"
                                        :value="option.id">
                                        {{ String.fromCharCode(65 + index) }}. {{ option.value }}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                            <div v-else-if="question.subject_type === 1" class="question-options">
                                <el-checkbox-group v-model="question.answer" @change="handleAnswerChange(question)">
                                    <el-checkbox v-for="(option, index) in question.options" :key="option.id"
                                        :value="option.id">
                                        {{ String.fromCharCode(65 + index) }}. {{ option.value }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div v-else-if="question.subject_type === 0" class="question-options">
                                <el-radio-group v-model="question.answer" @change="handleAnswerChange(question)">
                                    <el-radio :label="true">正确</el-radio>
                                    <el-radio :label="false">错误</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <div v-else class="loading-indicator">加载中...</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
    findAllQuestions,
    finduser,
    findexaminationByType,
    submitExamResult,
    findtime,
} from "@/api/kaoshi";
import { onBeforeRouteLeave } from "vue-router";
import { watch } from "vue";
import { useRoute } from "vue-router";
import { useUserInfoStore } from "@/store/user";
const userInfoStore = useUserInfoStore();
let saveInterval = null;
const jiesho = ref({});
const extractQueryParams = () => {
    const route = useRoute();
    jiesho.value.eid = route.query.eid || "";
    jiesho.value.examid = route.query.examid || "";

    // 检查 eid 是否为有效的数字
    if (jiesho.value.eid !== "" && !isNaN(jiesho.value.eid)) {
        jiesho.value.eid = parseInt(jiesho.value.eid, 10);
    } else {
        console.error("eid from query is invalid or undefined:", jiesho.value.eid);
        jiesho.value.eid = 0; // 设置默认值
    }

    // 检查 examid 是否为有效的数字
    if (jiesho.value.examid !== "" && !isNaN(jiesho.value.examid)) {
        jiesho.value.examid = parseInt(jiesho.value.examid, 10);
    } else {
        console.error(
            "examid from query is invalid or undefined:",
            jiesho.value.examid
        );
        jiesho.value.examid = 0; // 设置默认值
    }
    console.log(jiesho.value);
};

// 监听 isExamSubmitted 的变化
onBeforeRouteLeave((to, from, next) => {
    clearInterval(saveInterval);
    next();
});
// 定义 handlePopState 函数
const handlePopState = () => {
    history.pushState(null, document.title, location.href);
    ElMessage.warning("不允许返回上一页，请继续完成考试。");
};
const examination = ref({});
// 添加 startTime 的响应式变量
const startTime = ref(null);
// 定义一个响应式变量 currentQuestionId，并将其初始值设为 null
const currentQuestionId = ref(null);
//用于存储学生信息
const studentInfo = ref({});
// 考试数据
const examData = reactive({
    totalScore: 0,
    questionTypes: [
        {
            questions: [
                {
                    answer: [],
                },
            ],
        },
    ],
});
// 标志位，用于判断是否已经从 localStorage 恢复了数据
const dataLoadedFromLocalStorage = ref(false);
// 添加新的标志位来区分是否已经提交试卷
const isExamSubmitted = ref(false);
const examdata = async (eid) => {
    // 异步调用 findexaminationByType 函数获取类型为 45 的考试数据
    const shuju = await findexaminationByType(eid);
    // 将获取到的数据赋值给 examination 响应式变量
    examination.value = shuju.data;
    // 在控制台输出 examination 的值，用于调试
    // console.log(examination.value);
};
/**
 * 异步函数，用于查找用户信息并更新学生信息
 */
const Finduser = async (uid) => {
    // 调用 finduser 函数获取用户信息，传入用户ID 89
    const id = await finduser(uid);
    // 将获取到的用户数据赋值给 studentInfo 响应式变量
    studentInfo.value = id.data;
};
const handleAnswerChange = (question) => {
    // 当答案发生变化时，更新进度条
    updateProgress();
    // 将题目数据和答案存储到 localStorage
    saveDataToLocalStorage();
};
// 从 localStorage 恢复数据
const loadDataFromLocalStorage = () => {
    const savedStudentInfo = localStorage.getItem("studentInfo");
    const savedCurrentQuestionId = localStorage.getItem("currentQuestionId");
    const savedTabSwitchData = localStorage.getItem("tabSwitchData");
    const savedStartTime = localStorage.getItem("startTime");
    const savedEndTime = localStorage.getItem("endTime");
    const savedExamData = localStorage.getItem("examData");

    if (savedStudentInfo) {
        studentInfo.value = JSON.parse(savedStudentInfo);
    }
    if (savedCurrentQuestionId) {
        currentQuestionId.value = savedCurrentQuestionId;
    }
    if (savedTabSwitchData) {
        const { count, enabled } = JSON.parse(savedTabSwitchData);
        tabSwitchCount = count || 0;
        tabSwitchWarningEnabled = enabled !== undefined ? enabled : true;
    }
    if (savedStartTime) {
        startTime.value = JSON.parse(savedStartTime);
    }
    if (savedEndTime) {
        endTime.value = JSON.parse(savedEndTime);
    }
    if (savedExamData) {
        examData.totalScore = JSON.parse(savedExamData).totalScore;
        examData.questionTypes = JSON.parse(savedExamData).questionTypes;
        dataLoadedFromLocalStorage.value = true; // 标记数据已从 localStorage 恢复
    }
};

// 修改 saveDataToLocalStorage 方法
const saveDataToLocalStorage = () => {
    if (isExamSubmitted.value) {
        // console.log("提交后已禁用 localStorage 存储操作");
        return;
    }
    try {
        localStorage.setItem("examData", JSON.stringify(examData));
        localStorage.setItem("startTime", JSON.stringify(startTime.value));
        localStorage.setItem("endTime", JSON.stringify(endTime.value));
        // console.log("数据已成功保存到 localStorage");
    } catch (error) {
        // console.error("保存数据到 localStorage 失败:", error);
    }
};
// 清除所有缓存数据，包括切屏数据
const clearLocalStorageData = () => {
    // console.log("清除考试相关数据");
    // 清除与考试相关的特定数据项
    localStorage.removeItem("examData");
    localStorage.removeItem("studentInfo");
    localStorage.removeItem("currentQuestionId");
    localStorage.removeItem("endTime");
    localStorage.removeItem("tabSwitchData");
    localStorage.removeItem("startTime");

    // 重置切屏相关数据
    tabSwitchCount = 0;
    tabSwitchWarningEnabled = true;
};
/**
 * 异步加载考试题目数据并处理
 * @async
 * @function shuju
 * @description 从服务器获取题目数据，处理并初始化考试数据，包括题型排序和选项随机化。
 */
// 添加一个辅助函数来验证参数是否为有效的整数
const isValidInteger = (value) => {
    return Number.isInteger(value) && value > 0;
};

// 在调用 findAllQuestions 时进行验证
const shuju = async (eid) => {
    try {
        if (!isValidInteger(eid)) {
            ElMessage.error("考试 ID 无效，请检查 URL 参数");
            return;
        }
        // 调用 findAllQuestions 函数获取题目数据
        const res = await findAllQuestions(eid);
        if (res.data) {
            // 如果已经从 localStorage 恢复了数据，则跳过重新赋值
            if (!dataLoadedFromLocalStorage.value) {
                // 如果没有从 localStorage 恢复数据，则重新赋值
                examData.totalScore = res.data.totalScore;
                examData.questionTypes = res.data.questionTypes.map((type) => ({
                    ...type,
                    subject_type: type.subject_type ?? -1,
                }));
                // 定义题型顺序
                const typeOrder = {
                    2: 0, // 单选题
                    1: 1, // 多选题
                    0: 2, // 判断题
                };
                // 根据定义的顺序对题型进行排序
                examData.questionTypes.sort((a, b) => {
                    const typeA =
                        a.questions.length > 0 ? a.questions[0].subject_type : -1;
                    const typeB =
                        b.questions.length > 0 ? b.questions[0].subject_type : -1;
                    return typeOrder[typeA] - typeOrder[typeB];
                });
                // 检查是否已经存在排序后的数据，如果不存在则进行排序
                examData.questionTypes.forEach((type) => {
                    type.questions = shuffleArray(type.questions);
                    type.questions.forEach((question) => {
                        question.options = shuffleArray(question.options);
                    });
                });
                // 设置当前题目ID
                currentQuestionId.value =
                    examData.questionTypes[0]?.questions[0]?.subject_id;
                // 滚动到第一题
                nextTick(() => {
                    scrollToQuestion(currentQuestionId.value);
                });
            }
        }
    } catch (error) {
        // 捕获并打印加载题目数据时的错误
        ElMessage.error(`加载题目数据失败: ${error.message}`);
    }
};

// 计算总题目数量
const totalQuestions = computed(() =>
    examData.questionTypes.reduce(
        (total, type) => total + type.questions.length,
        0
    )
);
// 计算已答题目数量
const answeredQuestions = computed(() =>
    examData.questionTypes.reduce(
        (acc, type) =>
            acc +
            type.questions.filter(
                (q) =>
                    q.answer !== null &&
                    q.answer !== undefined &&
                    !(
                        q.subject_type === 1 &&
                        Array.isArray(q.answer) &&
                        q.answer.length === 0
                    )
            ).length,
        0
    )
);
// 计算进度百分比
const progressPercentage = computed(() =>
    totalQuestions.value === 0
        ? 0
        : Math.floor((answeredQuestions.value / totalQuestions.value) * 100)
);
// 更新进度
const updateProgress = () => {
    nextTick(() => {
        progressPercentage.value = Math.floor(
            (answeredQuestions.value / totalQuestions.value) * 100
        );
    });
};
// 计算全局题号
const getGlobalQuestionIndex = (typeIndex, questionIndex) => {
    let globalIndex = 0;
    for (let i = 0; i < typeIndex; i++) {
        globalIndex += examData.questionTypes[i].questions.length;
    }
    globalIndex += questionIndex + 1; // 当前题目在当前题型中的位置 + 1（从1开始）
    return globalIndex;
};
// 跳转到指定题目
const goToQuestion = (globalIndex) => {
    // console.log(`准备跳转到全局题号：${globalIndex}`); // 打印全局题号
    let totalQuestionsCount = 0;
    let found = false;
    for (
        let typeIndex = 0;
        typeIndex < examData.questionTypes.length;
        typeIndex++
    ) {
        const type = examData.questionTypes[typeIndex];
        for (
            let questionIndex = 0;
            questionIndex < type.questions.length;
            questionIndex++
        ) {
            const questionGlobalIndex = getGlobalQuestionIndex(
                typeIndex,
                questionIndex
            );
            if (questionGlobalIndex === globalIndex) {
                currentQuestionId.value = type.questions[questionIndex].subject_id;
                found = true;
                break;
            }
        }
        if (found) break;
    }

    nextTick(() => {
        if (currentQuestionId.value) {
            scrollToQuestion(currentQuestionId.value);
        }
    });
};
/**
 * 检查问题是否已回答
 * @param {Object} question - 问题对象
 * @returns {boolean} - 如果问题已回答返回true，否则返回false
 */
const isAnswered = (question) => {
    // 对于多选题，如果答案数组为空，则视为未回答
    if (
        question.subject_type === 1 &&
        Array.isArray(question.answer) &&
        question.answer.length === 0
    ) {
        return false;
    }
    return question.answer !== null && question.answer !== undefined;
};
/**
 * 根据题目ID滚动到指定题目位置
 * @param {string} id - 题目的唯一标识符
 */
const scrollToQuestion = (id) => {
    // 通过 data-question-id 属性查找对应的题目元素
    const questionElement = document.querySelector(`[data-question-id="${id}"]`);
    if (questionElement) {
        // 获取页面头部的高度，如果没有头部则默认为0
        const headerHeight = document.querySelector(".header")?.offsetHeight || 0;
        // 计算题目元素相对于文档顶部的距离，并加上当前的滚动距离
        const questionOffsetTop =
            questionElement.getBoundingClientRect().top + window.scrollY;
        // 平滑滚动到题目位置，减去头部高度和额外的20像素偏移
        window.scrollTo({
            top: questionOffsetTop - headerHeight - 20,
            behavior: "smooth",
        });
    } else {
        // 如果找不到对应的题目元素，显示错误消息
        ElMessage.error(
            `无法定位到题目 ID 为 ${id} 的题目，请检查数据是否正确加载！`
        );
    }
};
// 随机打乱数组的函数
const shuffleArray = (array) => {
    const shuffledArray = [...array]; // 创建一个新数组以避免修改原始数组
    for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1)); // 随机选择一个索引
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]]; // 交换元素
    }
    return shuffledArray;
};
/**
 * 将布尔值转换为文本表示。
 * 如果值为 true，返回 "对"；如果值为 false，返回 "错"；
 * 如果值既不是 true 也不是 false，返回原始值。
 *
 * @param {boolean} value - 要转换的布尔值。
 * @returns {string|boolean} - 转换后的文本或原始值。
 */
const mapBooleanToText = (value) => {
    return value === true ? "对" : value === false ? "错" : value;
};
// 计算分数
const calculateScore = () => {
    let correctCount = 0;
    let totalScore = 0;
    // 计算题目总数
    const totalQuestionsCount = examData.questionTypes.reduce((total, type) => {
        return total + type.questions.length;
    }, 0);
    examData.questionTypes.forEach((type) => {
        type.questions.forEach((question) => {
            const { subject_type, subject_answer, questiones_score, options } =
                question;
            // 确保 answer 和 subject_answer 存在
            if (
                question.answer === null ||
                question.answer === undefined ||
                subject_answer === null ||
                subject_answer === undefined
            ) {
                return;
            }
            // 单选题 (subject_type === 2)
            if (subject_type === 2) {
                const userAnswerLabel = getOptionLabelByValue(question.answer, options); // 获取用户答案对应的标签（例如 "A"）
                const correctAnswerLabel = getOptionLabelByValue(
                    subject_answer,
                    options
                ); // 获取正确答案标签（例如 "A"）
                if (userAnswerLabel === correctAnswerLabel) {
                    correctCount++; // 如果用户答案与正确答案一致，增加正确题目数
                    totalScore += questiones_score || 0; // 加上该题的分数
                } else {
                }
            }
            // 多选题 (subject_type === 1)
            else if (subject_type === 1) {
                // 确保 correctAnswerLabels 是一个数组
                const correctAnswerLabels = Array.isArray(subject_answer)
                    ? subject_answer
                    : [subject_answer];
                // 获取用户选择的选项标签并排序
                const userAnswerLabels = question.answer
                    .map((val) => getOptionLabelByValue(val, options))
                    .sort();
                // 将正确答案转换为一个排序后的字符串
                const correctAnswerString = correctAnswerLabels.sort().join(",");
                // 将用户的答案转换为字符串进行比较
                const userAnswerString = userAnswerLabels.join(",");
                // 比较用户的答案和正确答案
                if (userAnswerString === correctAnswerString) {
                    correctCount++; // 如果用户答案与正确答案一致，增加正确题目数
                    totalScore += questiones_score || 0; // 加上该题的分数
                } else {
                }
            }
            // 判断题 (subject_type === 0)
            else if (subject_type === 0) {
                // 对于判断题，正确答案和用户答案应该是布尔值
                const userAnswerText = mapBooleanToText(question.answer);
                const correctAnswerText = mapBooleanToText(subject_answer);
                if (userAnswerText === correctAnswerText) {
                    correctCount++; // 如果用户答案与正确答案一致，增加正确题目数
                    totalScore += questiones_score || 0; // 加上该题的分数
                } else {
                }
            }
        });
    });
    // 计算正确率
    if (totalQuestionsCount === 0) {
        console.warn("没有题目，无法计算正确率");
        return {
            totalScore: totalScore.toFixed(2),
            correctRate: "0.00",
        };
    }
    // 返回总分和正确率
    return {
        totalScore: totalScore.toFixed(2), // 保留两位小数
        correctRate: ((correctCount / totalQuestionsCount) * 100).toFixed(2), // 计算正确率
    };
};
// 通过题目的选项来获取选项的 ID
const getOptionLabelByValue = (value, options) => {
    const option = options.find((option) => option.id === value); // 确保是通过 id 进行查找
    return option ? option.id : null;
};
// 提交试卷
const confirmSubmit = () => {
    // 计算当前时间与考试开始时间的差值（以毫秒为单位）
    const currentTime = Date.now();
    const timeElapsed = currentTime - startTime.value;

    // 15分钟的毫秒数
    const fifteenMinutesInMilliseconds = 15 * 60 * 1000;

    //判断是否已经过去了15分钟
    if (timeElapsed < fifteenMinutesInMilliseconds) {
        ElMessage.warning("考试开始后15分钟内不允许提交试卷，请稍后再试。");
        return;
    }

    ElMessageBox.confirm(
        "您确定要提交试卷吗？提交后将无法更改答案。",
        "提交确认",
        {
            confirmButtonText: "提交",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(() => {
            stopTabSwitchDetection();
            stopCountdown(); // 停止倒计时
            submitExam();
            isExamSubmitted.value = true; // 设置为已提交
            clearLocalStorageData(); // 清除缓存
            disableSubmitButton();
        })
        .catch((action) => {
            if (action === "cancel") {
                ElMessage.info("已取消提交试卷");
            }
        });
};
// 提交考试数据
const submitExamData = async () => {
    try {
        const examDataToSubmit = collectExamData();
        clearLocalStorageData(); // 清除缓存
        // console.log("即将提交的数据:", examDataToSubmit); // 打印日志以便调试
        const response = await submitExamResult(examDataToSubmit);
        if (response.code !== 200) {
            ElMessage.error("提交失败，请重试");
            return;
        }
        ElMessage.success("试卷提交成功");
    } catch (error) {
        ElMessage.error(`提交失败，请稍后再试：${error.message}`);
    }
};
// 收集用户的答案
const collectExamData = () => {
    // 计算已用时间
    const timeUsed = formatTime(Date.now() - startTime.value); // 使用已用时间
    const totalScore = calculateScore().totalScore;
    const simulatedExamTime = formatDate(new Date()); // 格式化当前时间为 `YYYY-MM-DD HH:mm:ss`

    const answerContent = examData.questionTypes.map((type) => ({
        typeName: type.name,
        questions: type.questions.map((question) => ({
            subject_id: question.subject_id,
            answer: question.answer,
            score: question.questiones_score,
        })),
    }));
    // 打印用户选择的答案
    // console.log("用户选择的答案:", answerContent);
    return {
        exam_id: jiesho.value.examid, // 考试 ID
        content: JSON.stringify(answerContent), // 答案内容以 JSON 字符串形式存储
        scor: totalScore,
        examination_id: examination.value.examination_id,
        duration: timeUsed, // 使用已用时间
        student_id: studentInfo.value.user_id, // 从 studentInfo 中获取用户 ID
        submit_time: simulatedExamTime, // 格式化时间
        start_exam_time: formatDate(new Date(startTime.value)), // 格式化开始时间
    };
};
const submitExam = (reason = "考试时间结束") => {
    // 计算总分和正确率，并将结果存储在 result 变量中
    const result = calculateScore();
    // 设置考试已提交的状态
    isExamSubmitted.value = true;
    // 清除本地存储中的缓存数据
    clearLocalStorageData();

    // 收集考试的相关数据
    const examDataToSubmit = collectExamData(); // 收集用户答案

    // 使用 ElMessageBox 展示考试结果，包括总分和正确率
    ElMessageBox.alert(
        `总分：${result.totalScore}/${examData.totalScore}<br>正确率：${result.correctRate}`,
        "考试结束",
        {
            dangerouslyUseHTMLString: true, // 允许在消息框中使用 HTML 标签
            confirmButtonText: "确定", // 确定按钮的文字
        }
    )
        .then(() => {
            // 停止选项卡切换检测功能
            stopTabSwitchDetection();
            // 停止倒计时功能
            stopCountdown();
            // 保存重置后的切屏数据到 localStorage
            saveTabSwitchDataToLocalStorage();
            // 提交考试数据
            submitExamData(examDataToSubmit);
            redirectToResultsPage();
        })
        .catch(() => {
            // 确保即使在 catch 中也停止切屏检测并重置状态
            stopTabSwitchDetection();
            stopCountdown();
            saveTabSwitchDataToLocalStorage();
        });
};
// 定义一个响应式变量 endTime，用于存储考试的结束时间
const endTime = ref();
// 定义一个响应式变量 loading，用于控制加载状态，默认值为 true
const loading = ref(true);
// 定义一个响应式变量 timeLeft，用于存储剩余时间，默认值为 0
const timeLeft = ref(0);
let isPaused = false; // 标记倒计时是否暂停
let countdownInterval = null; // 计时器变量
const fetchCountdown = async () => {
    try {
        // 检查是否已经提交过试卷
        if (isExamSubmitted.value) {
            console.log("考试已提交，不再恢复时间数据");
            return;
        }

        const storedEndTime = localStorage.getItem("endTime");
        if (storedEndTime && !isNaN(storedEndTime)) {
            endTime.value = parseInt(storedEndTime, 10);
            console.log("Loaded endTime from localStorage:", endTime.value);
        } else {
            const response = await findtime();
            console.log("API Response:", response);
            if (!response || !response.data || !response.data.countdown) {
                throw new Error("无效的响应数据: 缺少 countdown 字段");
            }
            const data = response.data;
            const [hours, minutes, seconds] = data.countdown.split(":").map(Number);
            if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) {
                throw new Error("无效的倒计时格式");
            }
            const countdownMilliseconds =
                (hours * 60 * 60 + minutes * 60 + seconds) * 1000;
            const currentTime = new Date().getTime();
            endTime.value = currentTime + countdownMilliseconds;
            console.log("Calculated endTime:", endTime.value);
            localStorage.setItem("endTime", endTime.value);
        }
        loading.value = false;
        startCountdown();
    } catch (error) {
        // console.error("获取倒计时数据失败", error);
        loading.value = false;
        ElMessage.error(`获取倒计时数据失败: ${error.message}`);
        // 设置默认倒计时时间，例如1小时
        endTime.value = Date.now() + 3600000;
        // console.log("Setting default endTime:", endTime.value);
        localStorage.setItem("endTime", endTime.value);
        startCountdown();
    }
};
/**
 * 启动倒计时功能
 *
 * 该函数启动一个定时器，每秒更新一次剩余时间。
 * 如果考试被暂停（isPaused 为 true），则不更新剩余时间。
 * 当剩余时间小于或等于零时，清除定时器并将剩余时间设置为零。
 *
 * @function startCountdown
 */
const startCountdown = () => {
    countdownInterval = setInterval(() => {
        if (isPaused) return; // 如果暂停，直接返回，不执行后续代码
        const now = new Date().getTime();
        timeLeft.value = endTime.value - now;
        if (timeLeft.value <= 0) {
            clearInterval(countdownInterval);
            timeLeft.value = 0;
            // submitExam("考试时间结束");
        }
    }, 1000);
};
/**
 * 停止倒计时函数
 * 设置暂停标志，停止倒计时并输出日志信息
 */
const stopCountdown = () => {
    isPaused = true; // 设置暂停标志，停止倒计时
    // console.log("倒计时已暂停");
};
// 计算剩余时间中的小时数
const hours = computed(() => Math.floor(timeLeft.value / (1000 * 60 * 60)));
// 计算剩余时间中的分钟数（不包括小时）
const minutes = computed(() =>
    Math.floor((timeLeft.value % (1000 * 60 * 60)) / (1000 * 60))
);
// 计算剩余时间中的秒数（不包括分钟和小时）
const seconds = computed(() =>
    Math.floor((timeLeft.value % (1000 * 60)) / 1000)
);
// 格式化时间
const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    const hours = String(date.getUTCHours()).padStart(2, "0");
    const minutes = String(date.getUTCMinutes()).padStart(2, "0");
    const seconds = String(date.getUTCSeconds()).padStart(2, "0");
    return `${hours}:${minutes}:${seconds}`;
};
// 格式化时间为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 禁用提交按钮
const disableSubmitButton = () => {
    const submitButton = document.querySelector(".submit-btn");
    if (submitButton && !submitButton.disabled) {
        submitButton.disabled = true;
        // console.log("提交按钮已禁用");
    }
};
//路由
import router from "@/router";
// 跳转到结果页面
const redirectToResultsPage = () => {
    router.push({
        path: "/course/CourseList",
    });
};
let tabSwitchWarningEnabled = true; // 是否启用切屏提示
let tabSwitchCount = 0; // 切屏提示计数器
const maxTabSwitchWarnings = 3; // 最大提示次数
let lastFocusState = true; // 上一次的焦点状态
let hasWarnedThisCycle = false; // 是否已经在当前周期中触发了提示
let checkFocusInterval = null;
// 保存切屏次数数据到 localStorage
const saveTabSwitchDataToLocalStorage = () => {
    const tabSwitchData = {
        count: tabSwitchCount,
        enabled: tabSwitchWarningEnabled,
    };
    localStorage.setItem("tabSwitchData", JSON.stringify(tabSwitchData));
};

const startTabSwitchDetection = () => {
    if (document.addEventListener && window.addEventListener) {
        // console.log("启用切屏检测功能");
        document.addEventListener("visibilitychange", handleTabSwitchEvent);
        window.addEventListener("blur", handleTabSwitchEvent);

        // 定时器检测窗口焦点状态
        checkFocusInterval = setInterval(checkFocusState, 800); // 每秒检测一次
    }
};
// 停止切屏检测
const stopTabSwitchDetection = () => {
    document.removeEventListener("visibilitychange", handleTabSwitchEvent);
    window.removeEventListener("blur", handleTabSwitchEvent);
    clearInterval(checkFocusInterval); // 如果有定时器，确保清除定时器
};
// 切屏事件处理
const handleTabSwitchEvent = () => {
    // 如果页面失焦或者变为不可见并且还没有在这个周期内触发过提示
    if (
        (document.hidden || !document.hasFocus()) &&
        tabSwitchWarningEnabled &&
        !hasWarnedThisCycle
    ) {
        warnAndCount();
        hasWarnedThisCycle = true;
    }
};
// 定时器检测窗口焦点状态
const checkFocusState = () => {
    const currentFocusState = document.hasFocus();

    // 如果焦点状态发生变化并且当前没有触发过提示
    if (currentFocusState !== lastFocusState) {
        lastFocusState = currentFocusState;

        if (!currentFocusState && tabSwitchWarningEnabled && !hasWarnedThisCycle) {
            warnAndCount();
            hasWarnedThisCycle = true;
        } else {
            hasWarnedThisCycle = false;
        }
    }
};

// 提示并计数逻辑
const warnAndCount = () => {
    tabSwitchCount++;
    if (tabSwitchCount <= maxTabSwitchWarnings) {
        ElMessage.warning(
            `检测到切屏或失焦行为！您还有 ${maxTabSwitchWarnings - tabSwitchCount
            } 次机会。`
        );
    }
    if (tabSwitchCount >= maxTabSwitchWarnings) {
        ElMessage.error("您已达到切屏限制，请保持专注！");
        submitExam();
        stopTabSwitchDetection();
        tabSwitchWarningEnabled = false;
    }
    // 保存切屏次数和状态
    saveTabSwitchDataToLocalStorage();
};

onMounted(() => {
    loadDataFromLocalStorage(); // 页面加载时恢复本地存储的数据
    extractQueryParams(); //获取信息
    startTime.value = Date.now(); // 记录开始时间
    fetchCountdown(); // 获取倒计时数据
    startCountdown(); // 启动倒计时
    Finduser(userInfoStore.userInfo.userId); // 查找用户信息
    examdata(jiesho.value.eid); // 获取考试数据
    startTabSwitchDetection(); // 启动标签页切换检测
    // 定期保存数据到本地存储，每1秒执行一次
    saveInterval = setInterval(saveDataToLocalStorage, 1000);
    shuju(jiesho.value.eid); // 执行数据处理函数
    // 禁用右键菜单
    document.addEventListener("contextmenu", (e) => e.preventDefault());
    // 禁用 F12 和开发者工具快捷键
    document.addEventListener("keydown", (e) => {
        if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
            e.preventDefault();
            ElMessage("禁止使用开发者工具！"); // 显示提示信息
        }
    });
     // 禁止浏览器回退
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', handlePopState);
});

onUnmounted(() => {
    // 停止切屏检测功能
    stopTabSwitchDetection();
    // 停止倒计时功能
    stopCountdown();
    // 清除 localStorage 中的 endTime
    localStorage.setItem("endTime", endTime.value);
    // 移除禁用开发者工具的事件监听器
    document.removeEventListener("keydown", (e) => {
        if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
            e.preventDefault();
            ElMessage("禁止使用开发者工具！");
        }
    });
    // 清除保存数据的定时器
    if (saveInterval) {
        clearInterval(saveInterval);
    }
    // 清除所有缓存数据
    clearLocalStorageData();
    // 禁用提交按钮
    disableSubmitButton();
    // 禁用右键菜单
    document.removeEventListener("contextmenu", (e) => e.preventDefault());
     // 移除禁止回退的事件监听器
    window.removeEventListener('popstate', handlePopState);
});
watch(isExamSubmitted, (newVal) => {
    if (newVal) {
        clearInterval(saveInterval);
    }
});
</script>

<style scoped>
/* 全局字体设置 */
body {
    font-family: "Arial", "Helvetica Neue", sans-serif;
    /* 现代无衬线字体 */
    line-height: 1.6;
    /* 全局行高 */
    color: #333333;
    /* 主文字颜色 */
}
/* 悬停状态统一的颜色高亮 */
.question-btn:hover {
    background-color: #ff6161;
    color: #fff;
    transition: all 0.3s ease;
}

/* 页面基础布局 */
.exam-page {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 按列方向排列子元素 */
    font-family: Arial, sans-serif;
    /* 设置字体 */
}

/* 标题栏 */
.header {
    z-index: 99;
    /* 设置堆叠顺序 */
    position: fixed;
    /* 固定标题栏 */
    top: 0px;
    /* 距离顶部的距离 */
    left: 0;
    /* 距离左侧的距离 */
    width: 100%;
    /* 占满宽度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: space-between;
    /* 两端对齐 */
    padding: 1vw 5vw;
    /* 内边距随视口宽度变化 */
    background: linear-gradient(90deg, #e63946, #f76c6c);
    /* 红色渐变背景 */
    color: white;
    /* 字体颜色 */
    font-size: clamp(14px, 1.5vw, 24px);
    /* 动态字体大小 */
    height: clamp(50px, 8vh, 100px);
    /* 动态标题栏高度 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* 添加阴影 */
    box-sizing: border-box;
    /* 包括内边距 */
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.5px;
}

.header-middle {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    flex-grow: 1;
    /* 占据剩余空间 */
    text-align: center;
    /* 文本居中 */
}

.timer {
    font-family: "Courier New", monospace;
    font-weight: bold;
    color: #ffebcd;
    /* 字体颜色 */
    font-size: 18px;
    /* 字体大小 */
}

.timer-title {
    font-weight: bold;
    /* 加粗字体 */
    margin-right: 10px;
    /* 右侧外边距 */
}

.timer-display {
    display: inline-block;
    /* 行内块级元素 */
    font-size: 20px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗字体 */
}

.content {
    margin-top: clamp(60px, 10vh, 100px);
    /* 顶部间距动态调整 */
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        /* 小屏幕下标题栏可换行 */
        align-items: flex-start;
        /* 左侧对齐 */
        padding: 1vh 2vw;
        /* 调整内边距 */
    }
}

.submit-btn {
    background: #e63946;
    /* 红色背景 */
    color: white;
    /* 字体颜色 */
    border: none;
    /* 无边框 */
    padding: 10px 20px;
    /* 内边距 */
    border-radius: 8px;
    /* 圆角 */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s;
    /* 平滑过渡效果 */
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.submit-btn:hover {
    background: #d62839;
    /* 悬停时更深红色 */
}

/* 主体布局 */
.content {
    display: flex;
    /* 使用 Flexbox 布局 */
}

/* 左侧信息栏 */
.sidebar {
    position: fixed;
    /* 固定位置 */
    top: 62px;
    /* 距离顶部的距离 */
    left: 8px;
    /* 距离左侧的距离 */
    width: 280px;
    /* 宽度 */
    height: calc(100vh - clamp(60px, 10vh, 100px));
    /* 动态高度 */
    padding: 15px;
    /* 内边距 */
    z-index: 80;
    /* 设置堆叠顺序 */
    font-family: "Lato", sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    letter-spacing: 0.3px;
}

.content {
    margin-left: 280px;
    /* 左侧外边距 */
    flex: 1;
    /* 占据剩余空间 */
    padding: 20px;
    /* 内边距 */
}

.card {
    background: white;
    /* 背景色 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    border-radius: 8px;
    /* 圆角 */
    padding: 14px;
    /* 内边距 */
    margin-bottom: 15px;
    /* 底部外边距 */
    font-family: "Noto Sans", sans-serif;
    font-size: 15px;
    color: #444;
    /* 柔和主色调 */
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* 新的左侧信息卡片样式 */
.sidebar-info {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 按列方向排列子元素 */
    gap: 8px;
    /* 项目之间的间距 */
}

.exam-info {
    display: flex;
    width: 240px;
    gap: 6px;
    flex-direction: column;
}

/* 下划线分隔线样式 */
.sidebar-info hr {
    border: 0;
    /* 无边框 */
    height: 1px;
    /* 高度 */
    background: #ddd;
    /* 背景色 */
    margin: 10px 0;
    /* 上下外边距 */
}

.type-navigation {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 5px;
    /* 项目之间的间距 */
}

.type-navigation button {
    width: 30px;
    /* 宽度 */
    height: 30px;
    /* 高度 */
    background: #f0f0f0;
    /* 背景色 */
    border: none;
    /* 无边框 */
    border-radius: 4px;
    /* 圆角 */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: background-color 0.3s;
    /* 平滑过渡效果 */
}

.type-navigation button.active {
    background: #ff4040;
    /* 激活状态背景色 */
    color: white;
    /* 字体颜色 */
}

.type-navigation button:hover {
    background: #c6e2ff;
    /* 悬停时背景色 */
}

/* 试题展示区 */
.h1 {
    /* background-color: #333; */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: start;
    /* 垂直居中对齐 */
    justify-content: center;
    width: 350px;
    height: 36px;
    font-size: 23px;
}

.question-area {
    counter-reset: question;
    /* 初始化计数器 */
    flex: 1;
    /* 占据剩余空间 */
    padding: 20px;
    /* 内边距 */
    background-color: #ffffff;
    /* 背景色 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* 阴影效果 */
    margin-top: -25px;
    /* 设置负的 margin-top 值使其与左侧栏头部齐平 */
}

/* 单个题目容器样式 */
.question {
    margin-bottom: 30px;
    /* 底部外边距 */
    padding: 20px;
    /* 内边距 */
    background-color: #ffffff;
    /* 背景色 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    border-left: 6px solid #f02121;
    /* 左边框 */
    transition: transform 0.3s, box-shadow 0.3s;
    /* 平滑过渡效果 */
}

.question:hover {
    transform: translateY(-2px);
    /* 鼠标悬停时上移 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    /* 鼠标悬停时的阴影效果 */
}

/* 题目标题样式 */
.question-title {
    font-weight: bold;
    /* 加粗字体 */
    font-size: 16px;
    /* 字体大小 */
    color: #222;
    /* 文字颜色 */
    margin-bottom: 15px;
    /* 底部外边距 */
    line-height: 1.5;
    /* 行高 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 10px;
    /* 项目之间的间距 */
    font-family: "Georgia", serif;
    font-weight: bold;
    letter-spacing: 0.8px;
    line-height: 1.5;
}

/* 标题前的数字高亮 */
.question-title::before {
    content: counter(question);
    /* 显示计数器值 */
    counter-increment: question;
    /* 计数器递增 */
    display: inline-block;
    /* 行内块级元素 */
    background-color: #ff2e2e;
    /* 背景色 */
    color: white;
    /* 文字颜色 */
    font-size: 16px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗字体 */
    width: 30px;
    /* 宽度 */
    height: 30px;
    /* 高度 */
    text-align: center;
    /* 文字水平居中 */
    line-height: 27px;
    /* 文字垂直居中 */
    border-radius: 50%;
    /* 圆形 */
}

/* 确保父容器宽度为 100% */
.question-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    /* 包括内外边距 */
}

/* 保证每个选择框宽度一致 */
.question-options .el-radio,
.question-options .el-checkbox {
    display: flex;
    align-items: center;
    padding: 12px 13px;
    border-radius: 8px;
    border: 2px solid transparent;
    /* 设置透明边框 */
    transition: all 0.3s ease;
    font-size: 16px;
    cursor: pointer;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    /* 包括 padding 和 border */
    font-family: "Open Sans", sans-serif;
    color: #555;
    letter-spacing: 0.2px;
}

/* 为选项标签添加左边距 */
.question-options .el-radio__label,
.question-options .el-checkbox__label {
    font-size: 16px;
    color: #333;
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 鼠标悬停时的选项效果 */
.question-options .el-radio:hover,
.question-options .el-checkbox:hover {
    /* transform: scale(1.04); */
    /* 放大选项 */
    border: 2px solid transparent;
    /* 设置透明边框 */
    transition: all 0.3s ease;
    /* 平滑过渡效果 */
}

/* 鼠标悬停时文本略微变亮 */
.question-options .el-radio:hover .el-radio__label,
.question-options .el-checkbox:hover .el-checkbox__label {
    color: #f2f2f2;
    /* 文本变亮 */
}

/* 被禁用状态样式 */
.question-options .el-radio.is-disabled,
.question-options .el-checkbox.is-disabled {
    border-color: #e4e4e4;
    /* 边框颜色 */
    background-color: #f5f5f5;
    /* 背景色 */
    color: #bcbcbc;
    /* 文字颜色 */
    cursor: not-allowed;
    /* 鼠标指针样式 */
}

/* 图标样式（包括选中与未选中状态） */
.question-options .el-radio .el-radio__input,
.question-options .el-checkbox .el-checkbox__input {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中对齐 */
    align-items: center;
    /* 垂直居中对齐 */
    width: 20px;
    /* 宽度 */
    height: 20px;
    /* 高度 */
    border-radius: 50%;
    /* 圆形 */
    border: 2px solid #dcdcdc;
    /* 边框 */
    background-color: #ff4b4b;
    /* 背景色 */
    transition: all 0.3s ease;
    /* 平滑过渡效果 */
}

/* 单选框选中时的图标 */
.question-options .el-radio.is-checked .el-radio__input {
    border-color: #f33737;
    /* 边框颜色 */
    background-color: #ee2424;
    /* 背景色 */
}

/* 多选框选中时的图标 */
.question-options .el-checkbox.is-checked .el-checkbox__input {
    border-color: #f12020;
    /* 边框颜色 */
    background-color: #f73131;
    /* 背景色 */
}

/* 图标中的勾号 */
.question-options .el-checkbox.is-checked .el-checkbox__input::after {
    content: "✔";
    /* 勾号符号 */
    font-size: 12px;
    /* 字体大小 */
    color: white;
    /* 文字颜色 */
    text-align: center;
    /* 文字水平居中 */
}

/* 单选框和多选框的文本样式 */
.question-options .el-radio__label,
.question-options .el-checkbox__label {
    font-size: 16px;
    /* 字体大小 */
    color: #333;
    /* 文字颜色 */
    flex-grow: 1;
    /* 占据剩余空间 */
    padding-left: 10px;
    /* 左边内边距 */
}

/* 增加选项之间的间距 */
.question-options {
    gap: 12px;
    /* 项目之间的间距 */
}

.progress {
    gap: 8px;
    height: 30px;
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 进度条 */
.progress-info .el-progress {
    height: 20px;
    margin-bottom: 10px;
    /* 底部外边距 */
}

/* 答题卡整体样式 */
.question-types {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 按列方向排列子元素 */
}

.type-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 30px;
    /* 高度 */
    padding: 1px;
    /* 内边距 */
    font-size: 16px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗字体 */
    color: #333;
    /* 文字颜色 */
    margin-bottom: 3px;
    /* 底部外边距 */
}

.a1 {
    top: -7px;
    position: relative;
}

/* 题号按钮 */
.question-types-container .question-navigation {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 8px;
    /* 项目之间的间距 */
    align-items: center;
    /* 垂直居中对齐 */
}

.question-types-container .question-navigation>* {
    flex: 0 0 calc((100% - 8px * 4) / 5);
    /* 每行 5 个 */
    max-width: calc((100% - 8px * 4) / 5);
    /* 避免超出 */
}

.question-btn {
    width: 35px;
    /* 宽度 */
    height: 35px;
    /* 高度 */
    border-radius: 8px;
    /* 调整为圆角矩形 */
    border: 1px solid #dcdcdc;
    /* 边框 */
    background-color: #f0f0f0;
    /* 背景色 */
    color: #444;
    /* 文字颜色 */
    font-size: 13px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗字体 */
    text-align: center;
    /* 文字水平居中 */
    line-height: 35px;
    /* 文字垂直居中 */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s;
    /* 平滑过渡效果 */
    font-family: "Verdana", sans-serif;
    letter-spacing: 0.3px;
}

.question-btn:hover {
    color: white;
    /* 文字颜色 */
}

.question-btn.active {
    /* color: white; */
    /* 文字颜色 */
}

.question-btn.answered {
    background-color: #ff1b1b;
    /* 已回答状态的背景色 */
    border-color: #c23a3a;
    /* 边框颜色 */
    color: white;
    /* 文字颜色 */
}
</style>